//透明度
@mixin opacity($alpha:0.5) {
  opacity: $alpha;
  filter: alpha(opacity=$alpha*100);
}

//渐变Gradients
//水平left->right  两色
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9-
}

//垂直top->bottom  两色
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}

//带角度参数  两色
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}

//水平三色
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}

//垂直三色
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}

//圆形扩散
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}

@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

//阴影boxshadow//X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜 阴影透明度 是否是内部阴影 默认不是0;
@mixin box-shadow($x:0px,$y:0px,$r:1px,$w:1px,$c:$shadow-color,$alpha:0.3,$inset:0) {
  @if ($inset==0) {
    box-shadow: $x $y $r $w rgba($c, $alpha);
  } @else {
    box-shadow: $x $y $r $w rgba($c, $alpha) inset;
  }

}

//超出文本使用...替代
@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//公用渐变 参数 渐变部分  渐变时间  渐变曲线
@mixin transition($part:all,$time:0.2s,$style:linear) {
  -webkit-transition: $part $time $style;
  -moz-transition: $part $time $style;
  -ms-transition: $part $time $style;
  -o-transition: $part $time $style;
  transition: $part $time $style;
}

//滚动条样式美化(滑块颜色,背景颜色,选中时滑块颜色)
@mixin beautifyScrollbar($scrollbar-barcolor:$scrollbar-barcolor,$scrollbar-bgcolor:$scrollbar-bgcolor,$scrollbar-barcolor-active:$scrollbar-barcolor-active) {
  &::-webkit-scrollbar {
    width: 6px;
    background-color: $scrollbar-bgcolor;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: $scrollbar-barcolor;
  }
  /*滑块效果*/
  &::-webkit-scrollbar-thumb:hover {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px rgba($scrollbar-barcolor-active, 0.4);
    background: rgba($scrollbar-barcolor-active, 0.6);
  }
}

//背景图片平铺 覆盖  $src地址  $size:百分比,cover,contain等  $position位置 left:right:bottom:top
@mixin bgimgCover($src:"",$size:cover,$position:left) {
  background-image: url("#{$src}");
  background-size: $size;
  background-repeat: no-repeat;
  background-position: $position;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$src}', sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$src}', sizingMethod='scale');
}

@mixin stylePlaceholder($size:14px,$color:#ccc) {
  &::-webkit-input-placeholder { /* WebKit browsers */
    font-size: $size;
    color: $color;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: $size;
    color: $color;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: $size;
    color: $color;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: $size;
    color: $color;
  }
}

//禁止页面文字双击选中
@mixin noSelect() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin flexbox-display-flex($direction:column) {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: $direction;
}

@mixin flexbox-flex($width:100%) {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: $width;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@mixin flexbox-order($order) {
  -webkit-box-ordinal-group: $order;
  -moz-box-ordinal-group: $order;
  -ms-flex-order: $order;
  -webkit-order: $order;
  order: $order;
}

@mixin rightMenu($width: 400px) {
  position: absolute;
  right: 0;
  top: 0;
  top: 0;
  bottom: 0;
  width: $width;
  z-index: 2000;
  overflow-y: auto;
  @include beautifyScrollbar();
  .card-title {
    color: $main-ft-color;
    font-size: 16px
  }
}
